<script setup lang="ts">
import { ref } from 'vue'


const count = ref(0)
</script>

<template>
  <div>
    <el-card class="box-card">
      <div class="logo">
        <div class="img">
          <svg t="1674110514341" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12821" width="95" height="95"><path d="M939.008 245.248L521.728 6.656c-9.216-5.12-20.48-5.12-29.696 0L74.752 245.248c-9.216 5.12-14.848 14.848-14.848 25.6V752.64c0 8.704 3.584 16.896 9.728 22.528 0 0 0 4.096 5.12 5.12L492.032 1018.88c9.216 5.632 20.48 5.632 29.696 0l417.28-238.592 5.12-5.12c5.632-5.632 9.216-12.8 9.728-20.992V270.848c0-10.752-5.632-20.48-14.848-25.6z m-44.544 396.288L588.8 111.616l306.176 178.688-0.512 351.232z m-22.016 81.408H141.312L506.88 89.6l365.568 633.344zM424.96 111.616L119.296 641.536v-353.28L424.96 111.616z m81.92 847.872l-306.176-178.688h611.84L506.88 959.488z" fill="#1296db" p-id="12822"></path></svg>
        </div>
        <div class="text"><span class="x">X</span>RPA</div>
      </div>  
      <div class="status">
        XRPA is running
      </div>
      <div class="version">
        Version 1.0.0
      </div>
      <div class="machine">
        XRPA Machine
      </div>
      <div class="operation">
        <div>快速入门</div>
        <div>文档</div>
        <div>反馈</div>
      </div>
    </el-card>
  </div>

</template>

<style scoped>
.logo {
  width:100%;
  height:100px;
  display: flex;
  justify-content: center;
}
.logo .img{
  width: 95px;
  height: 95px;
}
.logo .text {
  font-size:60px;
  line-height: 95px;
  color: #60605b;
}
.logo .text .x{
  color: #4a93d6;
}
.operation{
  display: flex;
  width: 100%;
  justify-content: space-around;
  color: #599ef8;
  margin-top: 20px;
}
.status {
  width: 100%;
  display: flex;
  text-align: center;
  justify-content: center;
  margin-top: 10px;
  font-weight: 700;
  font-size: 18px;
}
.version {
  width: 100%;
  display: flex;
  text-align: center;
  justify-content: center;
  margin-top: 2px;
  font-weight: 600;
  font-size: 15px;
  color: #27272a;
}
.machine {
  width: 100%;
  display: flex;
  text-align: center;
  justify-content: center;
  margin-top: 12px;
  font-weight: 600;
  font-size: 12px;
  color: gray;
}
</style>
